<template>
    <div id="tmpl">
        <div class="back">
            <span @click="goback">< 返回</span>
            <span>图文咨询</span>
        </div>
        <div class="title">
            <h4 v-text="info.title"></h4>
            <p>{{ info.add_time | datefmt("YYYY-MM-DD") }} {{info.click}}次浏览</p>
        </div>
        <div id="content" v-html="info.content"></div>
        <comment :newsid="id"></comment>
    </div>
</template>

 <script type="text/ecmascript-6">
import common from '../../api/common.js'
import comment from '../../base/comment'
export default {
    components: {
        comment
    },
    data() {
        return {
            id: 0,
            info: {}
        }
    },
    created() {
        this.id = this.$route.params.id
        this.getInfo()
    },
    methods: {
        getInfo() {
            var url = common.apidomain + '/api/getnew/' + this.id
            this.$http.get(url).then(res => {
                var body = res.body;
                if (body.status != 0) {
                    alert(body.message);
                    return;
                }
                this.info = body.message[0];
            })
        },
        formartTime(time) {
            return time.split('T')[0]
        },
        goback() {
            this.$router.go(-1)
        }
    }
}
</script>

<style scoped>
.back {
    height: 40px;
    background: #F5F5F5;
    line-height: 40px;
    position: relative;
    color: #0277BD;
}
.back span:first-of-type {
    float: left;
    margin-left: 10px;
}  
.back span:last-of-type {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}  
.title h4 {
    color: #0094ff;
}

.title p {
    color: rgba(0, 0, 0, 0.5);
}

.title,
#content {
    padding: 5px;
}
</style>